<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表 - 商品管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" th:href="@{/products}">
                <i class="fas fa-store me-2"></i>商品管理系统
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" th:href="@{/products}">
                            <i class="fas fa-list me-1"></i>商品列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/products/new}">
                            <i class="fas fa-plus me-1"></i>添加商品
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="container mt-4">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">
                <i class="fas fa-boxes me-2"></i>商品列表
            </h1>
            <a th:href="@{/products/new}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>添加商品
            </a>
        </div>

        <!-- 商品表格 -->
        <div class="card">
            <div class="card-body">
                <div th:if="${products != null and !products.isEmpty()}" class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>商品名称</th>
                                <th>价格</th>
                                <th>产地</th>
                                <th>分类ID</th>
                                <th>店铺ID</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="product : ${products}">
                                <td th:text="${product.id}"></td>
                                <td>
                                    <a th:href="@{/products/{id}(id=${product.id})}" 
                                       th:text="${product.name}"
                                       class="text-decoration-none">
                                    </a>
                                </td>
                                <td>
                                    <span class="text-success fw-bold" th:text="'¥' + ${product.originalPrice}"></span>
                                </td>
                                <td th:text="${product.originPlace}"></td>
                                <td th:text="${product.categoryId}"></td>
                                <td th:text="${product.shopId}"></td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a th:href="@{/products/{id}(id=${product.id})}" 
                                           class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <a th:href="@{/products/{id}/edit(id=${product.id})}" 
                                           class="btn btn-outline-warning btn-sm">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <button type="button" 
                                                class="btn btn-outline-danger btn-sm"
                                                th:onclick="'confirmDelete(' + ${product.id} + ')'">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div th:if="${products == null or products.isEmpty()}" class="text-center py-5">
                    <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">暂无商品数据</h5>
                    <p class="text-muted">点击上方按钮添加第一个商品</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>确认删除
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这个商品吗？此操作无法撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        function confirmDelete(productId) {
            const deleteForm = document.getElementById('deleteForm');
            deleteForm.action = '/products/' + productId + '/delete';
            
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }
    </script>
</body>
</html>
